<div class="card creds-panel">
  <div class="card-header">
    <div class="row">
      <div class="col">
        <h2 class="h3 my-0" translate>cred.topic-title</h2>
      </div>
      <div class="col form-inline justify-content-end">
        <div class="btn-group filter-entry">
          <label class="btn btn-secondary" [ngClass]="{ active: format === 'rows' }" tabindex="0"
            [title]="'general.display-list' | translate">
            <input type="radio" name="display_format" value="rows" checked class="d-none" [(ngModel)]="format" /><span
              class="fa fa-list"></span>
            <span class="d-none" translate>general.display-list</span>
          </label>
          <label class="btn btn-secondary" [ngClass]="{ active: format === 'cards' }" tabindex="0"
            [title]="'general.display-cards' | translate">
            <input type="radio" name="display_format" value="cards" class="d-none" [(ngModel)]="format" /><span
              class="fa fa-th-large"></span>
            <span class="d-none" translate>general.display-cards</span>
          </label>
          <label class="btn btn-secondary" [ngClass]="{ active: format === 'timeline' }" tabindex="0"
            [title]="'general.display-timeline' | translate">
            <input type="radio" name="display_format" value="timeline" class="d-none" [(ngModel)]="format" /><span
              class="fa fa-calendar"></span>
            <span class="d-none" translate>general.display-timeline</span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="card-header filters" *ngIf="format !== 'timeline'">
    <div class="row filters-head text-center">
      <div class="col">
        <label class="btn btn-secondary btn-sm filter-entry" tabindex="0">
          <input type="checkbox" name="show_filters" value="1" class="d-none" [(ngModel)]="showFilters" />
          <span class="fa fa-filter left"></span>
          <span translate *ngIf="showFilters">general.hide-filters</span>
          <span translate *ngIf="!showFilters">general.show-filters</span>
          <span class="fa right" [ngClass]="{
              'fa-angle-double-up': showFilters,
              'fa-angle-double-down': !showFilters
            }"></span>
        </label>
        <div class="btn-group filter-entry">
          <label class="btn btn-secondary btn-sm" [ngClass]="{ active: stateSvc.filterActive === 'true' }" tabindex="0">
            <input type="radio" name="search_active" value="true" checked class="d-none"
              [(ngModel)]="stateSvc.filterActive" /><span class="fa fa-bell left"></span>
            <span translate>general.period-current</span>
          </label>
          <label class="btn btn-secondary btn-sm" [ngClass]="{ active: stateSvc.filterActive === 'false' }"
            tabindex="0">
            <input type="radio" name="search_active" value="false" class="d-none"
              [(ngModel)]="stateSvc.filterActive" /><span class="fa fa-history left"></span>
            <span translate>general.period-historical</span>
          </label>
        </div>
      </div>
    </div>
    <div class="row filters-body mt-3" *ngIf="showFilters">
      <div class="col-sm-3">
        <label class="control-label" translate>cred.cred-type</label>
        <select class="form-control" [(ngModel)]="credTypeId">
          <option value="" translate>cred.select-cred-type</option>
          <option *ngFor="let record of credTypeOptions" [value]="record.id">{{
            record.description
          }}</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label" translate>cred.issuer</label>
        <select class="form-control" [(ngModel)]="issuerId" (click)="test()">
          <option value="" translate>cred.select-issuer</option>
          <option *ngFor="let record of issuerOptions" [value]="record.id">{{
            record.name
          }}</option>
        </select>
      </div>
    </div>
  </div>
  <div class="card-header columns" *ngIf="format !== 'timeline'">
    <div class="row">
      <div class="col-sm-4">
        <a href="#" class="text-nowrap" translate>cred.cred-type</a> /
        <a href="#" class="text-nowrap"><strong translate>cred.start-date</strong>
          <span class="fa fa-arrow-down"></span></a>
      </div>
      <div class="col-sm-4">
        <a href="#" class="text-nowrap" translate>cred.issuer</a>
      </div>
      <div class="col-sm-4 d-none d-md-inline">
        Details
      </div>
    </div>
  </div>
  <div class="card-body p-0" *ngIf="format === 'timeline'">
    <credset-timeline [topicId]="topicId"></credset-timeline>
  </div>
  <div class="card-body" *ngIf="result$ | async as creds">
    <loading-indicator [loading]="creds.loading"></loading-indicator>
    <error-message [error]="creds.error"></error-message>
    <p class="text-muted my-3" *ngIf="creds.loaded && !creds.data?.length" translate>
      search.no-results
    </p>
    <cred-list [records]="creds.data" [format]="format"></cred-list>
  </div>
</div>
